<template>
  <div>
    <!-- 管道路线选择   -->
    <ul class="infinite-list pipeSelectList">
      <el-radio-group v-model="coreLine" fill="#6DA3F9" @input="handleInput">
        <template v-for="item in coreLineGroup">
          <el-radio-button :key="item.key" :label="item.value" @click.native.stop="handleItemClick">
            <p :class="[coreLine === '' ? 'ellipsis_1' : 'ellipsis']">
              {{ item.name }}
            </p>
          </el-radio-button>
        </template>
      </el-radio-group>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    selectPipe: {
      type: Object,
      default: "0"
    }
  },
  data() {
    return {
      coreLine: "",
      coreLineGroup: [],
      tag: true,
      id: localStorage.getItem("id"),
      userPipeData: {},
      isHandleItemClickExecuted: false
    };
  },
  mounted() {
    this.coreLine = null;
    this.initPipeSelectData();
  },
  watch: {
    selectPipe: {
      deep: true,
      handler(newVal) {
        this.userPipeData = JSON.parse(JSON.stringify(newVal));
        this.initPipeSelectData();
      }
    }
  },
  methods: {
    handleItemClick() {
      if (this.isHandleItemClickExecuted) {
        return;
      }
      this.isHandleItemClickExecuted = true;
      this.coreLine = '';
      setTimeout(() => {
        this.isHandleItemClickExecuted = false;
      }, 300)
    },
    handleInput(selectedLine) {
      this.coreLine = selectedLine;
      this.$emit("listen", selectedLine);
    },
    initPipeSelectData() {
      this.coreLineGroup = [];
      const { pipelineList } = this.userPipeData;
      
      for (const index in pipelineList) {
        this.coreLineGroup.push({
          key: Math.random(pipelineList[index].pipelineId.length)*10 +  pipelineList[index].pipelineId,
          name: pipelineList[index].pipelineSimpleName,
          value: pipelineList[index].pipelineId
        });
      }
    },
    getLineCenter(coords) {
      const midIndex = Math.floor(coords.length / 2);
      const averageLat =
        (coords[0][0] + coords[midIndex][0] + coords[coords.length - 1][0]) / 3;
      const averageLng =
        (coords[0][1] + coords[midIndex][1] + coords[coords.length - 1][1]) / 3;
      return [averageLat, averageLng];
    }
  }
};
</script>
<style scoped>
.ellipsis {
  overflow: hidden;
  white-space: normal;
  margin: 0;
}

.ellipsis_1 {
  overflow: hidden;
  white-space: normal;
  margin: 0;
  color: #606266 !important;
}

.pipeSelectList {
  padding: 0;
  margin: 0;
  float: left;
  overflow: auto;
  height: 30vh;
  width: 57px;
}

::v-deep .el-radio-button {
  width: 55px;
  background: #ffffff;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0px 0 0 0px !important;
  border-left: 1px solid #dcdfe6;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* el-radio-button__inner */
::v-deep .el-radio-button__inner {
  width: 55px;
  line-height: 1.5em;
  min-height: 54px;
  padding: 10px;
  border: 1px solid #dcdfe6;
}

/* 解决激活按钮的圆角样式不生效的问题
:deep(.el-radio-button.is-active .el-radio-button__inner) {} */
</style>
